<template>
	<view class="container" v-if="isLandscape">
		<!-- 视频层 -->
		<video src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/dt_bg.mp4" 
		autoplay
		loop
		:controls="false"
		class="bg-video"
		object-fit="cover"
		></video>
		<!-- 内容层 -->
		<view class="content">
			<!-- 头像和等级 -->
			<view class="header-img">
				<image class="my-head" src="https://img0.baidu.com/it/u=552049004,2608757118&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800"></image>
				<view class="lv">11</view>
			</view>
			
			<!-- 个人信息 -->
			<view class="user-info">
				{{userInfo.nickname}} 
			</view>
			<image class="vip" src="https://candy-mc.oss-cn-chengdu.aliyuncs.com/vip.png"></image>
			
			
			<!-- 匹配效果 -->
			<view class="match" v-show="match">
				{{ waitingTime }} 末日行动 之 拯救五角大楼
			</view>
			
			<!-- 右上角的金币和设置 -->
			<view class="money">
				<!-- 5个图标 -->
				<view class="item-icon">
					<i class="iconfont icon-shezhi"></i>
				</view>
				<view class="item-icon"></view>
				<view class="item-icon"></view>
				<view class="item-icon"></view>
				<view class="item-icon"></view>
			</view>
			
			<!-- 广告栏 -->
			<view class="advertisement">
				
			</view>
			
			
			<!-- 开始游戏 -->
			<view class="start-game" @click="startGame" v-if="!match">
				开始游戏(2/2)
			</view>
			<view class="start-game" @click="stopGame" v-else>
				取消准备
			</view>
			
			<!-- 左下角的功能区 -->
			<view class="tools">
				
			</view>
			<!-- 世界聊天框 -->
			<view class="message">
				
			</view>
			<!-- 世界聊天框 内容 -->
			<view class="message-content">
				
			</view>
			
			<!-- 组队邀请的同意 -->
			<view class="invite"></view>
			
		</view>
		
	</view>
	<view class="tip" v-else>
	  <text>请将设备旋转到横屏模式以查看内容</text>
	</view>
</template>

<script>
	import audioManager from '@/utils/audioManager.js';
	
	//导入请求接口
	import {getUserInfo} from "@/api/index"
	
	// import Money from "@/static/icon/money.vue"
	export default {
		data() {
			return {
				isLandscape: false,
				match:false,
				waitingTime: "00:00",
				myInterval:null,
				userInfo:{}
			}
		},
		components:{
		},
		//当页面加载完成触发
		mounted() {
			this.checkOrientation();
			window.addEventListener('resize', this.checkOrientation);
			this.getInfo();
		},
		//当页面摧毁前触发
		beforeDestroy() {
			window.removeEventListener('resize', this.checkOrientation);
		},
		methods: {
			//getInfo 获取用户信息
			getInfo(){
				getUserInfo().then((data)=>{
					console.log("结果",data);
					this.userInfo = data.data;
				})
			},
			//开始游戏
			startGame(){
				this.match = true;
				// 分  秒  Minutes and seconds
				let minutes = 0;
				let seconds = 0;
				this.myInterval = setInterval(()=>{
					seconds++;
					if(seconds==60){
						seconds=0;
						minutes++;
					}
					//补0
					let a,b;
					if(seconds<10){
						a = "0"+seconds
					}else{
						a = seconds;
					}
					if(minutes<10){
						b = "0"+minutes
					}else{
						b = minutes;
					}
					this.waitingTime = b + ":" + a;
				},1000);
				//点开始游戏再播放
				audioManager.playAudio('dt_btn', false);
				audioManager.playAudio('dating', true);
				//audioManager.playAudio('qiangshen', true);
			},
			stopGame(){
				this.match = false;
				this.waitingTime="00:00";
				clearInterval(this.myInterval);
				//摧毁所有音频
				audioManager.destroyAll();
				audioManager.playAudio('dt_btn', false);
			},
			checkOrientation() {
			  // 检测设备方向 宽大于高
			  this.isLandscape = window.innerWidth > window.innerHeight;
			  if(this.isLandscape){
				  
			  }else{
				  //摧毁所有音频
				  audioManager.destroyAll();
			  }
			}
		}
	}
</script>

<style>
.tip{
	width: 100%;
	height: 100vh;
	text-align: center;
	line-height: 100vh;
	font-size: 20px;
}
.bg-video{
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 1;
	left: 0px;
	top: 0px;
}
.content{
	width: 100%;
	height: 100vh;
	position: fixed;
	z-index: 2;
	left: 0px;
	top: 0px;
}
.header-img{
	width: 60px;
	height: 60px;
	position: absolute;
	display: inline-block;
	left: 5px;
	top: 5px;
	border: 1px solid #ccc;
}


.user-info{
	width: 120px;
	height: 20px;
	position: absolute;
	left: 100px;
	top: 5px;
	color: #fff;
	font-size: 15px;
}
.vip{
	width: 25px;
	height: 25px;
	position: absolute;
	left: 70px;
	top: 5px;
	/* box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5); */
}
.my-head{
	width: 60px;
	height: 60px;
}
.lv{
	height: 20px;
	width: 90%;
	text-align: right;
	position: absolute;
	bottom: 0px;
	color: #fff;
	font-size: 12px;
	text-shadow: 1px 1px 0 black;
}
.start-game{
	width: 160px;
	height: 60px;
	position: absolute;
	right: 15px;
	bottom: 15px;
	border: 1px solid #ccc;
	background-color: #790002;
	color: #eb9a9b;
	text-align: center;
	line-height: 60px;
	font-size: 20px;
	font-weight: bold;
}
.invite{
	width: 160px;
	height: 30px;
	position: absolute;
	right: 15px;
	bottom: 85px;
	border: 1px solid #ccc;
}
.match{
	width: 260px;
	height: 20px;
	position: absolute;
	background-color: rgba(235, 154, 155, 0.6);
	top: 15px;
	left: calc((100% - 260px) / 2);
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	border-radius: 5px;
}
.money{
	width: 240px;
	height: 30px;
	position: absolute;
	right: 15px;
	top: 5px;
	color: #fff;
}
.item-icon{
	float: right;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	background-color: #eb9a9b;
}
.item-icon:nth-child(1){
	margin-right: 0px;
}

.tools{
	width: 440px;
	height: 30px;
	position: absolute;
	left: 15px;
	bottom: 15px;
	border: 1px solid #ccc;
	color: #fff;
}
.message{
	width: 240px;
	height: 20px;
	position: absolute;
	left: 15px;
	bottom: 50px;
	border: 1px solid #ccc;
	color: #fff;
}
.advertisement{
	width: 240px;
	height: 120px;
	position: absolute;
	right: 15px;
	top: 50px;
	border: 1px solid #ccc;
	color: #fff;
}
.message-content{
	width: 240px;
	height: 260px;
	position: absolute;
	left: 15px;
	bottom: 75px;
	border: 1px solid #ccc;
	color: #fff;
}

</style>
